<!DOCTYPE HTML>
<html>

<head>
    <title>调试测试 - 二手电子乐园</title>
    <meta charset="utf-8" />
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .debug-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .debug-title {
            color: #e44c65;
            font-weight: bold;
            margin-bottom: 10px;
        }

        pre {
            background: #f5f5f5;
            padding: 10px;
            border-radius: 3px;
            overflow-x: auto;
        }
    </style>
</head>

<body>
    <h1>数据加载调试测试</h1>

    <div class="debug-section">
        <div class="debug-title">1. 检查数据是否加载</div>
        <div id="data-status">检查中...</div>
    </div>

    <div class="debug-section">
        <div class="debug-title">2. 产品数据统计</div>
        <div id="product-stats">统计中...</div>
    </div>

    <div class="debug-section">
        <div class="debug-title">3. 分类数据</div>
        <div id="category-data">加载中...</div>
    </div>

    <div class="debug-section">
        <div class="debug-title">4. 测试链接</div>
        <div>
            <a href="category.html?type=phone" target="_blank" style="margin-right: 10px;">测试手机分类</a>
            <a href="category.html?type=camera" target="_blank" style="margin-right: 10px;">测试相机分类</a>
            <a href="product-detail.html?id=1" target="_blank" style="margin-right: 10px;">测试产品详情</a>
        </div>
    </div>

    <script src="utils/loader.js"></script>
    <script>
        window.addEventListener('scriptsLoaded', function () {
            console.log('脚本加载完成');

            // 检查数据状态
            setTimeout(() => {
                const dataStatus = document.getElementById('data-status');
                const productStats = document.getElementById('product-stats');
                const categoryData = document.getElementById('category-data');

                if (window.siteData) {
                    dataStatus.innerHTML = '<span style="color: green;">✓ 数据加载成功</span>';

                    const featuredCount = window.siteData.featuredProducts ? window.siteData.featuredProducts.length : 0;
                    const recommendedCount = window.siteData.recommendedProducts ? window.siteData.recommendedProducts.length : 0;

                    productStats.innerHTML = `
                        <div>精选产品: ${featuredCount} 个</div>
                        <div>推荐产品: ${recommendedCount} 个</div>
                        <div>总计: ${featuredCount + recommendedCount} 个</div>
                    `;

                    // 显示分类统计
                    const allProducts = [
                        ...(window.siteData.featuredProducts || []),
                        ...(window.siteData.recommendedProducts || [])
                    ];

                    const categoryStats = {};
                    allProducts.forEach(product => {
                        categoryStats[product.category] = (categoryStats[product.category] || 0) + 1;
                    });

                    let categoryHtml = '<div>各分类产品数量:</div>';
                    Object.entries(categoryStats).forEach(([category, count]) => {
                        categoryHtml += `<div>${category}: ${count} 个</div>`;
                    });

                    categoryData.innerHTML = categoryHtml;

                } else {
                    dataStatus.innerHTML = '<span style="color: red;">✗ 数据加载失败</span>';
                    productStats.innerHTML = '数据未加载';
                    categoryData.innerHTML = '数据未加载';
                }
            }, 1000);
        });
    </script>
</body>

</html>